<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="补贴情况公开"-->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goback"> </header-nav>
    </div>
    <div class="warp_body">
      <div class="qr-container">
        <qrcode-stream
            @detect="onDecode"
            @camera-on="onCameraReady"
            @error="onError"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="ManagementPublicity">
import { QrcodeStream } from "vue-qrcode-reader";
import { showToast } from 'vant';
const testVice = reactive([]);
const router = useRouter();
// 扫码成功后的回调
const onDecode = (detectedCodes) => {
  if (detectedCodes.length > 0) {
    // 跳转到添加设备页面并传递设备编号
    let deviceCode = detectedCodes[0].rawValue;
    router.replace({
      name: "managementScanItemInfo",
      query: { deviceCode },
    });
  } else {
    showToast("扫码失败");
  }
};
const onCameraReady = (res) => {
  console.log("摄像头准备好了");
};
const onError = (error) => {
  if (error.name === "NotAllowedError") {
    // user denied camera access permission
    showToast("用户拒绝相机访问权限");
  } else if (error.name === "NotFoundError") {
    // no suitable camera device installed
    showToast("未安装合适的摄像设备");
  } else if (error.name === "NotSupportedError") {
    // page is not served over HTTPS (or localhost)
    showToast("当前网页没有通过 HTTPS 或 localhost 安全协议提供服务");
  } else if (error.name === "NotReadableError") {
    // maybe camera is already in use
    showToast("相机被占用了)");
  } else if (error.name === "OverconstrainedError") {
    // did you request the front camera although there is none?
    showToast("尝试使用前置摄像头)");
  } else if (error.name === "StreamApiNotSupportedError") {
    showToast("浏览器似乎缺少功能)");
    // browser seems to be lacking features
  }
};
onMounted(() => {
  navigator.mediaDevices
      .enumerateDevices()
      .then((devices) => {
        devices.forEach((device) => {
          if (device.kind === "videoinput") {
            console.log(
                "Video input device: " +  device.label + device.deviceId
            );
          }
        });
      })
      .catch((error) => {
        console.error("Error enumerating devices: ", error);
        showToast("Error enumerating devices");
      });
});
const goback = () => {
  router.go(-1);
}
</script>

<style lang="scss">
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; // 减去头部的高度
}
</style>
